<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../plugins/vue.min.js"></script>
    <style>
        .red{
            background-color: red;
        }
        .yellow{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div id="one">
        欢迎你{{name}}
        <!-- 动态改变class的值 -->
        <!-- 缩写   :class -->
        <div v-bind:class="whichcolor">变色</div>
        <div :class="isColor?'red':'yellow'">变色</div>
        <!-- @绑定事件的 -->
        <button @click="handleChange()">点我</button>
        <!-- 全称 -->
        <button v-on:click="handleChange()">改变</button>

        <div :class="myClassList">
            显示
        </div>

        <!-- 双向 -->
        <input type="text" v-model="myContent">

        <!-- 当为0时，不显示 -->
        <div v-show="0">显示哦哦</div>
        <div v-if="0">显示嘛</div>


        

        <!-- 绑定图片属性 -->
        <img v-bind:src="path"/>

        <!-- v-show   v-if  指令  -->
        <div v-show="isShow">动态显示隐藏</div>
        <div v-if="isCreate">动态创建和销毁</div>

        <input type="text" :value="name">

        <!-- v-for 列表 -->
      <!--   <ul>
            <!~~ data 是从list里面遍历拿到的每个值(临时变量) ~~>
            <!~~ <li v-for="data in list"> ~~>  
                <!~~ 可以添加下标索引    ~~>
                <!~~ <input type="text" > <button @click="add()">增加</button>
                <li v-for="(data,index) in list">
                {{data}}--{{index}}
                <button @click="delete(index)">删除</button> ~~>

            </li>
        </ul> -->
    </div>
<script>
    let mm = new Vue({
        el:'#one',
        data:{
            name:'大大怪将军',
            whichcolor: 'red',
            isColor:true,
            path: '',
            isShow: false,
            isCreate: false,
            list: ['11','22','33'],
            myClassList:'yellow',
            myContent:11
        },
        methods: {
            // handleChange:function(){
            //     consolisShowe.log("我的")
            // }

            
            // es6简写
            handleChange(){
                console.log("我的")
                // this指向的是当前vue对象
                this.name = "改变名城"
                this.whichcolor = 'yellow'
                this.isColor = !this.isColor
                this.path = 'https://bkimg.cdn.bcebos.com/pic/5bafa40f4bfbfbede2099e6975f0f736afc31f57?x-bce-process=image/resize,m_lfit,w_536,limit_1/format,f_jpg'
                this.isShow = !this.isShow
                this.isCreate =!this.isCreate
            }
        },
    })
</script>
</body>
</html>